<template>
    <div class="stock-container">
      <!-- 搜索区域 -->
      <div class="search-section">
        <van-field
          v-model="keyword"
          placeholder="请输入关键词"
          @input="onSearch"
        />
        <van-field
          label="类型"
          readonly
          :value="categoryName"
          placeholder="请选择类型"
          @click="showCategoryPicker = true"
        />
      </div>
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
        <!-- 物品列表 -->
        <div class="stock-list">
          <div v-for="(item, index) in list" :key="index" class="stock-item">
            <div class="stock-header">
              <div class="stock-name">{{ item.goodsName }}</div>
              <div class="stock-price">{{ item.categoryName }}</div>
            </div>
            <div class="stock-info">
              <div>库存数量：{{ item.goodsStock }}{{ item.goodsUnit }}</div>
            </div>
          </div>
        </div>
    </van-list>
    </van-pull-refresh>
      <!-- 类型选择弹窗 -->
      <van-popup v-model="showCategoryPicker" position="bottom">
        <van-picker
          :columns="categoryList"
          value-key="categoryName"
          @confirm="onCategoryConfirm"
          @cancel="showCategoryPicker = false"
          show-toolbar
        />
      </van-popup>
    </div>
  </template>
  
  <script>
  import { Toast } from 'vant'
  import { getStockList, getCategoryList } from '@/api/stockinquiry'
   
  export default {
    name: 'StockInquiry',
  
    data() {
      return {
        list: [],
        categoryList: [],
        keyword: '',
        categoryId: '',
        categoryName: '',
        showCategoryPicker: false,
        searchTimer: null,
         // 分页相关数据
        pageNum: 1,
        pageSize: 10,
        loading: false,
        finished: false,
        refreshing: false,
        total: 0
      }
    },
  
    created() {
      this.initData()
    },
  
    methods: {
        onRefresh() {
        this.pageNum = 1
        this.finished = false
        this.list = []
        this.getStockList()
      },
      onLoad(){
        this.getStockList()
      },
      initData() {
        this.getCategoryList()
        this.getStockList()
      },
  
      getCategoryList() {
        const params = {
          openSessionId: JSON.parse(localStorage.getItem('user'))?.openSessionId
        }
        getCategoryList(params)
          .then(res => {
            if (res.code === 200) {
              this.categoryList = res.data.categoryList
            } else {
              Toast.fail(res.message || '获取类型列表失败')
            }
          })
          .catch(err => {
            console.error(err)
            Toast.fail('获取类型列表失败')
          })
      },
  
      getStockList() {
        const params = {
          openSessionId: JSON.parse(localStorage.getItem('user'))?.openSessionId,
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          categoryId: this.categoryId,
          goodsName: this.keyword
        }
        getStockList(params)
        .then(res => {
          if (res.code === 200) {
            this.total = res.total
            
            if (this.refreshing) {
              this.list = []
              this.refreshing = false
            }
            
            this.list = this.list.concat(res.rows || [])
            this.loading = false
            
              // 数据全部加载完成
            if (this.list.length >= this.total) {
              this.finished = true
            } else {
              this.pageNum++
            }
          } else {
            Toast.fail(res.message || '获取库存列表失败')
          }
        })
        .catch(err => {
          console.error(err)
          Toast.fail('获取库存列表失败')
          this.loading = false
        })
      },
  
      onSearch() {
        if (this.searchTimer) {
        clearTimeout(this.searchTimer)
      }
      this.searchTimer = setTimeout(() => {
        this.pageNum = 1
        this.finished = false
        this.list = []
        this.getStockList()
      }, 300)
      },
  
      onCategoryConfirm(value) {
        this.categoryName = value.categoryName
      this.categoryId = value.id
      this.showCategoryPicker = false
      this.pageNum = 1
      this.finished = false
      this.list = []
      this.getStockList()
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .stock-container {
    min-height: 100vh;
    background-color: #f5f5f5;
    padding: 20px;
  
    .search-section {
      margin-bottom: 20px;
    }
  
    .stock-item {
      background: #fff;
      border: 1px solid #ddd;
      border-radius: 8px;
      margin-bottom: 15px;
      padding: 15px;
  
      .stock-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #eee;
        padding-bottom: 10px;
      }
  
      .stock-info {
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
        color: #666;
  
      }
    }
  }
  </style>